<!DOCTYPE html>
<html>
<head>
<title>Board Game</title>
<script src="giraffe-0.0.1.min.js"></script>
<script>
var canvas;
function init() {
	canvas = new Canvas("canvas");
  	Giraffe.Interactive.setInteractive(canvas);
  	Giraffe.setAnimated(canvas);
	canvas.startAnimation(10,100,true);
	
	drawBoard();
}

function drawBoard() {
	for(var i=0;i<20;i++) {
	for(var j=0;j<20;j++) {

		octagon = new Polygon(i*60,j*60);
		octagon.addPoint( 0,20 );
		octagon.addPoint( 0,40 );
		octagon.addPoint( 20,60 );
		octagon.addPoint( 40,60 );
		octagon.addPoint( 60,40 );
		octagon.addPoint( 60,20 );
		octagon.addPoint( 40,0 );
		octagon.addPoint( 20,0 );
		
		canvas.add(octagon);
	}
	}
}

</script>

</head>
<body onload="init();">
<canvas id="canvas" width="600" height="1000" style="border: solid 1px;"></canvas>
</body>
</html>